import 'package:flutter/material.dart';

class BottomSheetDemo extends StatefulWidget {
  const BottomSheetDemo({super.key});

  @override
  State<BottomSheetDemo> createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();
  
  _openBottomSheet() {
    _bottomSheetScaffoldKey.currentState!.showBottomSheet((context) {
      return BottomAppBar(
        child: Container(
          height: 90,
          width: double.infinity,
          padding: const EdgeInsets.all(10),
          child: const Row(
            children: [
              Icon(Icons.pause_circle_outline),
              SizedBox(width: 10,),
              Text('01:30 / 03:30'),
              Expanded(
                child: Text('Fix you - coldplay',textAlign: TextAlign.right,),
              )
            ],
          ),
        ),
      );
    });
  }


  _openModalBottomSheet() async {
  final  option = await showModalBottomSheet(
      context: context,
      builder: (context) {
        return SizedBox(
          height: 200,
          child: Column(
            children: [
              ListTile(
                title: const Text('选择 A'),
                onTap: () {
                  Navigator.pop(context, 'A');
                },
              ),
              ListTile(
                title: const Text('选择 B'),
                onTap: () {
                  Navigator.pop(context, 'B');
                },
              ),
              ListTile(
                title: const Text('选择 C'),
                onTap: () {
                  Navigator.pop(context, 'C');
                },
              ),
            ],
          ),
        );
      },
    );

    debugPrint(option);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: const Text('BottomSheetDemo'),
        elevation: 0,
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: _openBottomSheet,
                  child: const Text('点击 _openBottomSheet'),
                ),
              ],
            ),
            const SizedBox(height: 20,),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: _openModalBottomSheet,
                  child: const Text('点击 _openModalBottomSheet'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
